<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>绑定样式</title>
  <style>
    .basic {
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }

    .happy {
      border: 4px solid red;;
      background-color: rgba(255, 255, 0, 0.644);
      background: linear-gradient(30deg, yellow, pink, orange, yellow);
    }

    .sad {
      border: 4px dashed rgb(2, 197, 2);
      background-color: gray;
    }

    .normal {
      background-color: skyblue;
    }

    .atguigu1 {
      background-color: yellowgreen;
    }

    .atguigu2 {
      font-size: 30px;
      text-shadow: 2px 2px 10px red;
    }

    .atguigu3 {
      border-radius: 20px;
    }
  </style>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
  <!--  动态绑定样式 字符串写法-->
  <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
  <br>
  <!--  动态绑定样式 数组写法-->
  <div class="basic" :class="arr">{{name}}</div>
  <!--  动态绑定样式 对象写法-->
  <div class="basic" :class="classobj">{{name}}</div>
  <div class="basic" :style="styleobj">{{name}}</div>
</div>
</body>
<script>
  new Vue({
    el: "#root",
    data() {
      return {
        name: "尚硅谷",
        mood: "normal",
        arr: ['atguigu1', 'atguigu2', 'atguigu3'],
        classobj: {
          atguigu1: false,
          atguigu2: false,
        },
        styleobj:{
          fontSize:'40px',
        }
      }
    },
    methods: {
      changeMood() {
        const arr = ['happy', 'sad', 'normal'];
        const index = Math.floor(Math.random() * 3);
        this.mood = arr[index];
      }
    }
  });
</script>
</html>
